<!--
 * @Descripttion: 登录页面
 * @Author: liujing
 * @Date: 2021-02-02 10:39:24
 * @LastEditTime: 2021-07-21 09:46:10
-->
<template>
  <div class="container">
    <div class="bgTitle">
      <p class="tips">基于区块链的敏感数据安全共享系统</p>
    </div>
    <el-form
      :model="ruleForm2"
      :rules="rules2"
      status-icon
      ref="ruleForm2"
      label-position="left"
      label-width="0px"
      class="demo-ruleForm login-page"
    >
      <div class="loginBox">
        <p class="title">登录</p>
        <p class="info">
          <el-form-item prop="username">
            <div style="display:flex;justify-content:center;align-items: center;width:200px">
              <p style="width:60px">用户名:</p>
              <el-input
                type="text"
                v-model="ruleForm2.username"
                auto-complete="off"
                placeholder="用户名"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <div
              style="display:flex;justify-content:center;align-items: center;width:200px"
            >
              <p style="width:60px">密码:</p>
              <el-input
                type="password"
                v-model="ruleForm2.password"
                auto-complete="off"
                placeholder="密码"
              ></el-input>
            </div>
            <template slot="suffix"
              ><span
                class="password-eye"
                @click="showPassword"
                :class="eyeType"
              ></span
            ></template>
          </el-form-item>
        </p>
        <div>
          <el-checkbox v-model="checked" class="remPwd">记住密码</el-checkbox>
          <a href="#" class="forgetPwd">忘记密码?</a>
        </div>
        <el-form-item>
          <button class="login" @click="handleSubmit">登录</button>
        </el-form-item>
        <p class="info">
          还没有账户?<a href="#" style="border:none;color:#58ad3f">注册</a>
        </p>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      logining: false,
      ruleForm2: {
        username: 'admin',
        password: '123456'
      },
      checked: false,
      rules2: {
        username: [
          {
            required: true,
            message: 'please enter your account',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: 'enter your password', trigger: 'blur' }
        ]
      },
      rememberme: false,
      pwdType: '',
      eyeType: ''
    }
  },
  created () {},
  // 页面载入后读取cookie
  mounted () {
    this.getCookie()
  },
  methods: {
    /**
pwdType: 'password',
eyeType: 'fa fa-eye-slash fa-lg'
 ... */
    showPassword () {
      if (this.pwdType === 'password') {
        this.pwdType = ''
        this.eyeType = 'fa fa-eye fa-lg'
      } else {
        this.pwdType = 'password'
        this.eyeType = 'fa fa-eye-slash fa-lg'
      }
    },
    handleSubmit (event) {
      this.$refs.ruleForm2.validate(valid => {
        if (valid) {
          this.logining = true
          if (
            this.ruleForm2.username === 'admin' &&
            this.ruleForm2.password === '123456'
          ) {
            // 登录成功
            this.logining = false
            sessionStorage.setItem('user', this.ruleForm2.username)
            this.$router.push({ path: '/blockList' })
            // 登陆成功 保存帐号密码
            if (this.rememberme === true) {
              this.setCookie(
                this.ruleForm2.username,
                this.ruleForm2.password,
                7
              )
            } else {
              this.deleteCookie()
            }
          } else {
            this.logining = false
            this.$alert('username or password wrong!', 'info', {
              confirmButtonText: 'ok'
            })
          }
        } else {
          console.log('error submit!')
          return false
        }
      })
    },
    setCookie (name, pass, days) {
      const expire = new Date()
      expire.setDate(expire.getDate() + days)
      document.cookie = `C-username=${name};expires=${expire}`
      document.cookie = `C-password=${pass};expires=${expire}`
    },
    getCookie () {
      if (document.cookie.length) {
        const arr = document.cookie.split('; ')
        for (let i = 0; i < arr.length; i++) {
          const arr2 = arr[i].split('=')
          if (arr2[0] === 'C-username') {
            this.ruleForm2.username = arr2[1]
          } else if (arr2[0] === 'C-password') {
            this.ruleForm2.password = arr2[1]
            this.rememberme = true
          }
        }
      }
    },
    // 修改为空，天数为-1
    deleteCookie () {
      this.setCookie('', '', -1)
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: url(../../images/backGround.jpg) no-repeat center center;
  position: relative;
  .bgTitle {
    width: 100%;
    height: 150px;
    background-color: #1f5783;
    opacity: 0.5;
    z-index: 1;
    position: absolute;
    top: 35%;
    .tips {
      height: 150px;
      line-height: 30px;
      color: white;
      font-size: 55px;
      font-weight: bold;
      text-align: left;
      padding-left: 50px;
    }
  }
  .loginBox {
    width: 350px;
    height: 350px;
    background-color: #235a78;
    position: absolute;
    top: 200px;
    right: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
    .title {
      //   width: 120px;
      margin-top: -10px;
      font-size: 25px;
      color: white;
    }
    .info {
      font-size: 15px;
      color: white;
    }
    .remPwd {
      font-size: 15px;
      color: white;
    }
    .forgetPwd {
      border: none;
      font-size: 15px;
      color: white;
      margin-left: 30px;
    }
    .login {
      width: 280px;
      height: 35px;
      line-height: 30px;
      border: none;
      background-color: #114b84;
      color: white;
      border-radius: 5px;
      margin-top: 8px;
      cursor: pointer;
    }
  }
}
</style>
